<template>
  <div>
    <div ref="container" class="container">
      <div class="wrapper">
        <div class="tab_left clearfix">
          <div
            class="left_nav"
            v-for="(item, index) in shopGoods"
            :key="index"
            @click="change(index)"
            :class="{
              nav_color: index == currentIndex
            }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>

    <div class="better_scroll" ref="better_scroll">
      <div class="better_wrraper">
        <div class="tab_r_item clearfix">
          <ul ref="foodsUI">
            <li v-for="(i, id) in shopGoods" :key="id">
              <h2 class="type">{{ i.name }}</h2>
              <ul v-if="shopGoods[0]">
                <li
                  class="shop_lis"
                  v-for="(food, index) in shopGoods[0].foods"
                  :key="index"
                >
                  <div class="shop_icon">
                    <img :src="food.image" alt="" />
                  </div>
                  <div class="shop_pro">
                    <h3>{{ food.name }}</h3>
                    <p class="shop_name">{{ food.description }}</p>
                    <p class="shop_num">
                      月售{{ food.sellCount }}份<span
                        >好评率{{ food.rating }}%</span
                      >
                    </p>
                    <p class="shop_price">￥{{ food.price }}</p>
                    <!-- 购物车 -->
                    <div class="shop_card">
                      <cart-shop :food="food"></cart-shop>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
import CartShop from './cart/cartShop'
export default {
  data() {
    return {
      scroll: '',
      foodScroll: '',
      scrollY: '',
      tops: []
    }
  },
  components: {
    CartShop
  },
  computed: {
    ...mapState(['shopLis', 'shopGoods']),
    // 计算当前分类的下标
    currentIndex() {
      //  得到条件数据
      const { scrollY, tops } = this
      // 根据条件计算产出一个结果
      const index = tops.findIndex((top, index) => {
        return scrollY >= top && scrollY < tops[index + 1]
      })
      // 返会结果
      return index
    }
  },
  methods: {
    // 点击左侧列表右侧列表滑动相应的位置
    change(index) {
      // 得到目标scrollY
      const scrollY = this.tops[index]
      //   立即更新scrollY
      this.scrollY = scrollY
      //   平滑滑动右侧列表
      this.foodScroll.scrollTo(0, -scrollY, 300)
    },
    // 初始化scroll滚动
    initScroll() {
      const container = this.$refs.container
      const betterScroll = this.$refs.better_scroll
      // 左侧列表滚动
      this.scroll = new BScroll(container, {
        click: true
      })
      // 右侧列表滚动
      this.foodScroll = new BScroll(betterScroll, {
        probeType: 2, // 因为惯性不会触发
        click: true
      })
      // 给右侧列表绑定监听
      this.foodScroll.on('scroll', ({ x, y }) => {
        // 滑动过程中收集scrollY
        this.scrollY = Math.abs(y)
      })
      // 给右侧列表绑定scrollEnd监听,滚动结束后改变左侧列表背景颜色
      this.foodScroll.on('scrollEnd', ({ x, y }) => {
        this.scrollY = Math.abs(y)
      })
    },
    // 初始化TOPS
    initTops() {
      // 初始化top
      const tops = []
      let top = 0
      tops.push(top)
      // 收集
      // 1,找到所有的li
      const lis = this.$refs.foodsUI.children
      Array.prototype.slice.call(lis).forEach(li => {
        top += li.clientHeight
        tops.push(top)
      })
      // 更新数据
      this.tops = tops
    }
  },
  mounted() {
    setTimeout(() => {
      this.initScroll()
      this.initTops()
    }, 100)
  }
}
</script>

<style lang="less" scoped>
.tab_r_item {
  background-color: #fff;
}

.wrapper {
  height: 100%;
  overflow: hidden;
  padding-bottom: 2.066667rem;
}

.better_wrraper {
  padding-bottom: 3.069667rem;
}

.better_scroll {
  height: 10.49rem;
  width: 8.055rem;
  overflow: hidden;
  position: absolute;
  left: 1.933333rem;
  right: 0;
  top: 45px;
}

.van-tab {
  font-size: 0.533333rem;
}

.container {
  position: absolute;
  overflow: hidden;
  left: 0;
  height: 10.666667rem;
  overflow: hidden;
  right: 0;
  bottom: 0;
  top: 40px;
  z-index: -1;
}

.left_nav {
  height: 1.266667rem;
  width: 1.933333rem;
  text-align: center;
  line-height: 1.266667rem;
  color: black;
  font-weight: 550;
  font-size: 0.383333rem;
}

.shop_lis {
  border-bottom: 0.026667rem solid #ccc;
  margin: 0 0.133333rem;
  padding-bottom: 0.366667rem;
}

.tab_left {
  background-color: #f3f3f3;
  width: 1.933333rem;
}

.nav_color {
  background-color: white;
}

.show_item {
  display: block !important;
}

.shop_lis {
  display: flex;
  padding-top: 0.206667rem;
  overflow: hidden;
  // width: 8.055rem;
  &:last-child {
    border-bottom: 0;
  }
  .shop_icon {
    flex: 25%;
    img {
      height: 2.066667rem;
      width: 2.066667rem;
      padding: 0 0.266667rem;
      padding-top: 0.133333rem;
    }
  }
  .shop_pro {
    flex: 75%;
    .shop_card {
      margin-top: 0.266667rem;
    }
    h3 {
      font-size: 0.48rem;
      color: black;
      font-weight: 600;
      margin-bottom: 0.133333rem;
    }
    p {
      padding-top: 0.156667rem;
    }
    .shop_num,
    .shop_name {
      color: #ccc;
      font-size: 0.4rem;
      padding: 0.133333rem 0;
      span {
        padding-left: 0.266667rem;
      }
    }
    .shop_price {
      color: red;
      font-size: 0.373333rem;
    }
  }
}

.type {
  padding-left: 0.533333rem;
  background-color: #f6f6f6;
  padding-top: 0.133333rem;
  padding-bottom: 0.133333rem;
}

.tab_r_item {
  overflow: hidden;
}
</style>
